/* MAIN CONTENT */

#welcomeContent {
    background-repeat: no-repeat;
    background-image: url("../Assets/Art/The\ Sorcerer\ And\ The\ Power\ Of\ LifeTN.jpeg");
    background-position-y: 30%;
    background-size: cover;
    text-align: center;
    visibility: hidden;
    height: 0;
}

#welcomeText div {
    font-size: 4vh;
}

#mainContent {
    user-select: none;
}

#mainContent #welcomeText {
    background-color: rgba(0, 0, 0, 0.8);
    color: #d2dcdb;
    font-size: 10vh;
    font-weight: 100;
    width: 100%;
    height: 100%;
    text-shadow: 0.2vw 0.3vw 1vw #47474783, 0vw 0.25vw 1.25vw #6e6e6eab;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--fontFancy);
}

#welcomeText a {
    font-size: 2vw;
    background-color: #ffffff77;
    backdrop-filter: blur(0.5vw);
    border-radius: 2vw;
    color: black;
    font-weight: 500;
    padding: 1vw 1vw 1vw 1vw;
    font-family: var(--fontFancy);
    border: none;
    margin: 1vw 1vw 1vw 1vw;
    width: 10vw;
    text-shadow: none;
    text-decoration: none;

    transition: background-color 0.25s linear;
}

#welcomeText a:hover {
    background-color: #ffffff36;
}

#mainContent #aboutMe {
    background-color: #fcfcfc;
}

/* GALLERY */

#gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#galleryTitle {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 10vh;
    align-items: center;
    font-size: 5vw;
    font-family: var(--font7);
    margin-top: calc(2vh + 4vw);
    margin-bottom: 2vh;

    user-select: text;
}

#gallery img {
    width: max(20vw, 30vh);
    height: max(20vw, 30vh);
    object-fit: cover;
    /*margin: 3.5vw;
    margin-top: 7vw;
    margin-bottom: 7vw;*/
    box-shadow: 0.2vw 0.3vw 1vw #47474783;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
    margin: 4vw;
    background-color: #47474783;
}

#gallery img:hover {
    filter: brightness(80%);
    cursor: pointer;
    scale: 110%;
}

#gallery button {
    width: 30vw;
    height: 100%;
    /*opacity: 0;*/
    border: 0;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    cursor: ew-resize;
    z-index: 0;
}

#gallery div {
    display: flex;
    justify-content: center;
}

/* OVERLAY */

#imgOverlay {
    position: fixed; /* Sit on top of the page content */
    /*transform: translate(0, -10%);*/
    display: flex;
    width: 100%; /* Full width (cover the whole page) */
    height: 100%;
    /*top: 22vh;*/
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1); /* Black background with opacity */
    z-index: 1001; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */

    font-family: var(--fontFancy);
    cursor: default;

    flex-flow: wrap;
    align-items: center;
    place-content: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

#closeImgOverlay {
    font-size: 3vw;
    position: absolute;
    top: 2vw;
    right: 3.5vw;
    z-index: 2000;
    cursor: pointer;
    color: darkred;
    font-family: var(--fontFancy);
    transition: font-size 0.25s;
}

#closeImgOverlay:hover
{
    color: rgb(206, 88, 88);
    font-size: 4vw;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

#menuButtons div {
    width: 2vw;
    height: 2vw;

    padding: 0;
    border: 0;

    position: fixed;
    bottom: 2vw;

    display: flex;
    align-items: center;
    justify-content: center;

    user-select: none;
    cursor:pointer;
    z-index: 2000;
}

#leftScroll {
    left: 3.5vw;
}

#rightScroll {
    right: 3.5vw;
}

.scrollButton {
    font-size: 1vw;
    outline: 0.1vw solid black;
}

.scrollButton:hover {
    font-size: 1.25vw;
    background-color: rgb(241, 241, 241);
}

#imgContent {
    width: auto;
    height: auto;
    /*bottom: 19vh;*/

    max-height: 75vh;
    max-width: 70vw;
    box-shadow: 0.2vw 0.3vw 1vw #47474783;
    border: 1px lightgray solid;

    user-select: none;
}

#imgDescription {
    width: 30vw;
    /* min-width: 20vw;
    max-width: 30vw; */
    /* max-width: 30vw; */
    height: 75vh;
    /* inline-size: 50vw; */
    overflow-wrap: break-word;
    /*margin-bottom: 25vh;*/   
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;

    font-family: var(--fontNormal);

    padding: 1vw;
}

#imgInfo {
    margin-top: 3vw;
}

#imgTitle {
    font-size: 5vw;
    line-height: 5vw;

    padding: 1vw;
    font-family: var(--fontFancy);
}

#imgText {
    margin-top: 1vw;
    font-family: var(--fontNormal);
}

.stop-scrolling {
    overflow: hidden;
}